<template>
    <div class="Radar">
        <div class="title">推进情况</div>
        <el-select
            v-model="value"
            class="chartSelect"
            placeholder="发改局"
            @change="SelectChange"
        >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <div id="radar"></div>
    </div>
</template>

<script>
    import echarts from 'echarts';

    export default {
        props:['resData'],
        data() {
            return {
                options: [],
                all: [],
                chartsData: [],
                value: ''
            }
        },
        methods: {
            Charts(datas) {
                var myChart = echarts.init(document.getElementById("radar"));
                let option = {
                    backgroundColor: 'transparent',
                    radar: [
                        {
                            indicator: [
                                {text: '年度完成率'},
                                {text: '开工率'},
                                {text: '推进正常率'},
                                {text: '月度完成率'},
                                {text: '竣工率'},
                                {text: '资料完成率'},
                            ],
                            textStyle: {
                                fontSize: 12
                            },
                            radius: 46,
                            startAngle: 90,
                            splitNumber: 4,
                            shape: 'circle',
                            name: {
                                formatter: '{value}',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#2d3741'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#1b94c9',
                                    normal: {
                                        shadowColor: 'rgba(142, 152, 241, 0.6)'
                                    }
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'pie',
                            data: [{
                                value: 100,
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
                                            offset: 0.8, color: '#18467D' // 0.8% 处的颜色
                                        }, {
                                            offset: 1, color: 'rgba(15,49,83, 0)' // 100% 处的颜色
                                        }], false),
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                }
                            }],
                            radius: [220, 250]
                        },
                        {
                            name: '雷达图',
                            type: 'radar',
                            itemStyle: {
                                emphasis: {
                                    // color: 各异,
                                    lineStyle: {
                                        width: 4
                                    }
                                }
                            },
                            data: [
                                {
                                    value: datas,
                                    name: '图一',
                                    symbol: 'rect',
                                    symbolSize: 5,
                                    lineStyle: {
                                        normal: {
                                            type: 'dashed'
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
                myChart.setOption(option);
                let sizeFun = function () {
                    myChart.resize()
                }
                window.addEventListener("resize", sizeFun);
            },
            SelectChange(val) {
                this.all.map((item) => {
                    if (val == item.单位名称) {
                        let arr = []
                        let aa = item
                        delete aa.单位名称
                        for (var i in aa) {
                            arr.push(item[i]);
                            this.chartsData = arr
                        }
                        this.Charts(this.chartsData)
                    }
                })
            }
        },
        watch:{
            resData(res){
                let aa = res.data.推进情况数据
                aa.map((item) => {
                    return item
                })
                this.options = aa.map((item) => {
                    return {label: item.单位名称, value: item.单位名称}
                })
                this.all = aa;
                delete aa[0].单位名称
                let arr = Object.values(aa[0])
                this.Charts(arr)
            }
        },
    }
</script>

<style lang="less" scoped>
.Radar {
    position: relative;
    .title {
        width: 1.0688rem;
        height: .4679rem;
        color: #fff;
        font-weight: bold;
        font-size: .2083rem;
        background: url('@/assets/images/16.png') no-repeat bottom right;
        position: absolute;
    }
    .chartSelect {
        position: absolute;
        top: 50%;
        left: 0;
        width: 90px;
        height: 28px;
        z-index: 1;
        /deep/ .el-input__wrapper {
            padding: 1px 5px;
            background-color: rgba(10, 28, 64) !important;
            color: #fff;
        }
        /deep/ .el-input__inner {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
        }
    }

    #radar {
        width: 4.5625rem;
        height: 2.3667rem;
    }
}
</style>
